<template>
    <!-- 数据查询 -->
   <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="商品名称">
      <el-input v-model="formInline.Goods_Name" placeholder="请输入商品名称" clearable />
    </el-form-item>

    <el-form-item label="商品品牌">
      <el-select
        v-model="formInline.GoodsBrand_Id" clearable>
        <el-option label="==请选择商品品牌==" value="" />
        <el-option v-for="item in goodsBrandInfo" :label="item.goodsBrand_Name" :value="item.goodsBrand_Id" />
      </el-select>
    </el-form-item>

    <el-form-item label="创建时间">
      <el-date-picker
        v-model="formInline.Goods_CreateDate"
        type="date"
        placeholder="请选择创建时间"
        clearable
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="LoadData">查询</el-button>
    </el-form-item>
  </el-form>

    <!-- 数据展示 -->
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="goods_Id" label="商品编号" width="180" />
    <el-table-column prop="goods_Name" label="商品名称" width="180" />
    <el-table-column prop="goodsBrand_Name" label="商品品牌名称" width="180" />
    <el-table-column prop="goodsType_Name" label="商品类型名称" width="180" />
    <el-table-column prop="goods_Img" label="商品预览图" width="180">
        <template #default="scope">
            <img style="width: 120px;height: 120px;" :src="scope.row.goods_Img"/>
        </template>
    </el-table-column>

    <el-table-column prop="goods_Price" label="商品价格" width="180">
         <template #default="scope">
           {{ scope.row.goods_Price.toFixed(2) }}CNY
        </template>
    </el-table-column>

    <el-table-column prop="goods_CreateDate" label="创建时间" width="180">
        <template #default="scope">
           {{ moment(scope.row.goods_CreateDate).format('YYYY-MM-DD HH:mm:ss')}}
        </template>
    </el-table-column>

    <el-table-column prop="goods_State" label="状态" width="180" >
          <template #default="scope">
           {{ scope.row.goods_State==true?"上架":"下架"}}
        </template>
    </el-table-column>

     <el-table-column label="操作" width="180" >
      <template #default="scope">
         <el-button type="info" @click="EditGoods(scope.row.goods_Id)">修改</el-button>
      </template>
     </el-table-column>
  </el-table>

  <!-- 数据分页 -->
   <table>
      <tr>
        <td>  
          <el-pagination
                v-model:current-page="pageData.pageIndex"
                v-model:page-size="pageData.pageSize"
                :page-sizes="[2, 3, 4, 5]"
                :size="size"
                prev-text="上一页"
                next-text="下一页"
                :disabled="false"
                :background="true"
                layout="slot"
                :total="pageData.totalCount">
                  <!-- 通过插槽完成基础分页信息展示 -->
                  <template #default="scope">
                      共{{pageData.totalCount}}条数据，每页{{pageData.pageSize}}条，当前第{{ pageData.pageIndex }}/{{ pageData.pageCount }}页
                  </template>
              </el-pagination>
          </td>
          <td>
                <el-pagination
                v-model:current-page="pageData.pageIndex"
                v-model:page-size="pageData.pageSize"
                :page-sizes="[2, 3, 4, 5]"
                :size="size"
                prev-text="上一页"
                next-text="下一页"
                :disabled="false"
                :background="true"
                layout="slot, prev, pager, next"
                :total="pageData.totalCount">
                  <!-- 通过插槽完成基础分页信息展示 -->
                  <template #default="scope">
                      <button @click="pageData.pageIndex=1">首页</button>
                  </template>
              </el-pagination>
            </td>
             <td>
                <el-pagination
                v-model:current-page="pageData.pageIndex"
                v-model:page-size="pageData.pageSize"
                :page-sizes="[2, 3, 4, 5]"
                :size="size"
                prev-text="上一页"
                next-text="下一页"
                :disabled="false"
                :background="true"
                layout="slot,sizes, jumper"
                :total="pageData.totalCount">
                  <!-- 通过插槽完成基础分页信息展示 -->
                  <template #default="scope">
                      <button @click="pageData.pageIndex=pageData.pageCount">尾页</button>
                  </template>
              </el-pagination>
            </td>
      </tr>
   </table>
 

</template>

<script lang="ts" setup>
import {ref,onMounted,reactive,watch} from 'vue'
import axios from 'axios';
import moment from 'moment';
import type { ComponentSize } from 'element-plus'
import {useRouter} from 'vue-router'

//声明响应式数据完成数据保存
const tableData = ref([]);

const router=useRouter();

//声明查询参数
const formInline = reactive({
  Goods_Name: '',
  GoodsBrand_Id: '',
  Goods_CreateDate: '',
})

//声明查询响应式数据
const pageData=ref({
  pageIndex:1,  //当前页索引
  pageSize:2,   //每页显示数据条数
  totalCount:0,  //数据总数
  pageCount:0   //总页数
});

const size = ref<ComponentSize>('default')

//声明响应式数据接受商品品牌信息
const goodsBrandInfo=ref([{
    goodsBrand_Id:0,
    goodsBrand_Name:''
}]);

//声明侦听器，进行分页参数侦听
watch(pageData,()=>{
  LoadData();
},{deep:true})

onMounted(()=>{
    //加载商品信息
    LoadData();

    //加载商品品牌信息
    LoadGoodsBrand();
})

//完成数据加载
const LoadData=()=>{
    axios.get('api/Goods/ShowGoods',
        {
            params:{
                gName:formInline.Goods_Name,
                brandId:formInline.GoodsBrand_Id,
                createTime:formInline.Goods_CreateDate,
                pageIndex:pageData.value.pageIndex,
                pageSize:pageData.value.pageSize
            }
        }
    )
    .then(res=>{
      console.log(res.data.data.comm_Data);
        //将后台返回的数据赋值给数组
        tableData.value=res.data.data.comm_Data;

        //将数据总数、总页数保存到响应式数据中
        pageData.value.totalCount=res.data.data.comm_TotalCount;
        pageData.value.pageCount=res.data.data.comm_PageCount;
    })
}

//完成商品品牌信息加载
const LoadGoodsBrand=()=>{
    axios.get("/api/Goods/ShowGoodsBrand")
    .then(res=>{
        goodsBrandInfo.value=res.data.data;
    })
}

//完成页面跳转到修改页面
const EditGoods=(goodsId:number)=>{
  //第一种：通过路由完成参数传递
  // router.push({
  //   path:'/EditGoods',
  //   query:{
  //     gId:goodsId
  //   }
  // });

  //第二种：通过路由名称完成参数传递
  router.push({
    name:'EditGoods',
    params:{
      gID:goodsId
    }
  });
}
</script>


<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>